import React from 'react'
import uuid from 'uuid'
import * as FormUtil from '../../../public/js/formUtil'
import * as AlertUtil from '../../../public/js/alertUtil'
import DataTable from '../../../share/DataTable'
import { initTable , buttonEdit, buttonAdd,checkRight,buttonDelete } from '../../../public/js/public'

export default class ExecStep extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            tableId : uuid.v4(),
            toolbarId : uuid.v4()
        }
    }

    initTable() {
        let that = this, columns = [{
            title: 'ID',
            data: 'id'
        },{
            title: '任务名称',
            data: 'name',
        }, {
            title: '任务地址',
            data: 'site',
        }, {
            title : '操作',
            events : {
                'click .update' : (e, value, row) => {
                    let history = that.props.history
                    history.push('/replite/task/edit/' + row['id'])
                },
                'click .remove' : (e, value, row) => {
                    AlertUtil.confirm('删除提示','确定要删除该任务吗？！',()=>{
                        let url = domainName + "/replite/tasks/" + row.id, data = {}
                        FormUtil.del(url, data, (response)=>{
                            AlertUtil.alert('提示','删除成功!',()=>{
                                $('#' + that.state.tableId).DataTable().ajax.reload()
                            });
                            
                        })
                    })
                },
            },
            render(data, type, row, meta) {
                let edit = buttonEdit('replite:task:update'),html = [],
                    deleteButton = buttonDelete('replite:task:delete')
                html.push('<div class="button-group">')
                html.push(edit)
                html.push(deleteButton)
                html.push('</div>')
                return html.join('')
            }
        }]

        const tableConfig = {
            columns:columns,
            ajax: domainName + "/replite/tasks"
        }
        initTable({
            toolbarId :this.state.toolbarId,
            tableId: this.state.tableId,
            buttons : []
        },tableConfig)
    }

    componentDidMount() {
        this.initTable()
    }

    render() {
        return (
            <div>
                <DataTable title={this.state.title}>
                    <div id={this.state.toolbarId}>
                       {buttonAdd('replite:task:save', '#/replite/task/edit/')}
                    </div>
                    <table id={this.state.tableId} className="table table-striped table-bordered display"></table>
                </DataTable>
            </div>
        )
    }
}